<!--
 * @Description: 
 * @Author: zhanyinjia
 * @Date: 2023-05-17 09:38:45
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2023-08-02 16:34:46
-->
<template>
  <div>
    <el-select v-model="value" multiple filterable :filter-method="filterOptions" placeholder="请选择">
      <el-option :label="0" :value="0" :disabled="true">
        <ul class="header flex">
          <li class="cell">批号</li>
          <li class="cell">仓库</li>
          <li class="cell">库存</li>
          <li class="cell">价格</li>
        </ul>
      </el-option>
      <el-option v-for="item in displayOptions" :key="item.code" :label="item.code" :value="item.code">
        <ul class="body flex">
          <li class="cell">
            <i v-if="value.includes(item.code)" class="el-icon-success"></i>
            <span v-else class="unchecked"></span>
            <span>{{ item.code }}</span>
          </li>
          <li class="cell">{{ item.store }}</li>
          <li class="cell">{{ item.stock }}</li>
          <li class="cell">{{ item.price }}</li>
        </ul>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'CustomSelect',
  data() {
    return {
      options: [
        {
          code: 'XH1111',
          store: '临沧',
          stock: 110,
          price: 12
        },
        {
          code: 'XH1112',
          store: '双柏',
          stock: 7895,
          price: 20
        },
        {
          code: 'XH1113',
          store: '临沧',
          stock: 998,
          price: 41
        },
        {
          code: 'XH1114',
          store: '双柏',
          stock: 120,
          price: 29
        },
        {
          code: 'XH1115',
          store: '临沧',
          stock: 4152,
          price: 85
        },
        {
          code: 'XH1116',
          store: '双柏',
          stock: 1250,
          price: 26
        }
      ],
      value: [],
      displayOptions: []
    }
  },
  created() {
    this.displayOptions = this.options
  },
  methods: {
    filterOptions(keyword) {
      console.log(keyword)
      if (keyword) {
        this.displayOptions = this.options.reduce((prev, next) => {
          if (next.code.indexOf(keyword) > -1 || next.store.indexOf(keyword) > -1) {
            prev.push(next)
          }
          return prev
        }, [])
      } else {
        this.displayOptions = this.options
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header .cell,
.body .cell {
  width: 120px;
  .unchecked {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #cccccc;
  }
}
</style>